<template>
	<view class="register">
		<view class="top">
			<uni-title type="h2" title="登录" color="green" align="center"></uni-title>
			<uni-easyinput class="rowpad" v-model="password" placeholder="请输入手机号码"></uni-easyinput>
			<uni-easyinput class="rowpad" type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
			<view class="text">手机快捷登录</view>
			<button class="btn">登录</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onUnmounted } from 'vue';
	const isCountdown = ref(false);
	const countdownTime = ref(60);
	const countdownInterval = ref(null);
	const showPassword = ref(true);

	const changePassword = () => {
		showPassword.value = !showPassword.value
	}

	const password = ref('')



	const sendVerificationCode = () => {
		if (isCountdown.value) return;

		// 发送验证码的逻辑（这里只是模拟）
		console.log('发送验证码请求已发送');

		// 开始倒计时
		isCountdown.value = true;
		countdownTime.value = 60;
		const interval = setInterval(() => {
			if (countdownTime.value > 0) {
				countdownTime.value -= 1;
			} else {
				clearInterval(interval);
				countdownInterval.value = null;
				isCountdown.value = false;
			}
		}, 1000);
		countdownInterval.value = interval;
	};

	const validatePassword = (password) => {
		// 正则表达式：至少包含一个字母和一个数字，长度在6到12位之间
		const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
		return regex.test(password);
	}
	// 组件卸载时清除倒计时定时器
	onUnmounted(() => {
		if (countdownInterval.value) {
			clearInterval(countdownInterval.value);
		}
	});
</script>
<style lang="scss" scoped>
	.register {
		width: 100%;
		height: calc(100vh - 44px);
		padding: 16rpx;


		.top {
			background-color: white;
			border-radius: 16rpx;
			padding: 16rpx;
			padding-bottom: 40rpx;

			.text {
				text-align: right;
				margin-top: 20px;
				margin-bottom: 20px;
			}

			.rowpad {
				margin-top: 10px;
			}



			.btn {
				height: 40px;
				line-height: 40px;
				background-color: green;
				color: white;
				margin-top: 10px;
				margin-bottom: 16px;
			}



		}
	}
</style>